<template>
  <div class="invesorder">
    <div class="bgg">
      <div class="card_title">
        订单报表
      </div>
      <div class="groupbox" style="margin-bottom: 19px">
        <div class=" ">
          <a-space align="baseline">
            <span class="title">筛选小组：</span>
            <a-select
              label-in-value
              class="selecth24 br4"
              style="width: 175px;height:24px;"
              placeholder="请选择状态"
              @change="handleChange"
              v-model="group_id"
              allowClear
            >
              <a-select-option :value="v.id" v-for="(v,index) in classList" :key="index">
                {{ v.name }}
              </a-select-option>
            </a-select>
            <span class="title">组员：</span>
            <a-select
              label-in-value
              class="selecth24 br4"
              style="width: 175px;height:24px;"
              placeholder="请选择组员"
              @change="handleChange"
              v-model="user_id"
              allowClear
            >
              <a-select-option :value="v.id" v-for="(v,index) in classList" :key="index">
                {{ v.name }}
              </a-select-option>
            </a-select>
            <span class="title">商品状态：</span>
            <a-select
              label-in-value
              class="selecth24 br4"
              style="width: 175px;height:24px;"
              placeholder="请选择组员"
              @change="handleChange"
              v-model="user_id"
              allowClear
            >
              <a-select-option :value="v.id" v-for="(v,index) in classList" :key="index">
                {{ v.name }}
              </a-select-option>
            </a-select>
          </a-space>
        </div>
        <div class="" style="margin-top: 12px">
          <a-space align="baseline">
            <span class="title">活动id：</span>
            <a-input v-model="is_eventId" placeholder="活动id" class="ipt br4"/>
            <span class="title">商品id：</span>
            <a-input v-model="itemId" placeholder="商品id" class="ipt br4"/>
            <span class="title">店铺：</span>
            <a-input v-model="shopTitle" placeholder="店铺名称" class="ipt br4"/>
          </a-space>
        </div>
        <div class="" style="margin-top: 12px">
          <a-space align="baseline">
            <span class="title">订单时间段：</span>
            <a-range-picker
              :ranges="{
                本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
                上周: [
                  moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
                  moment().subtract(parseInt(moment().format('d')), 'days')
                ],
                本月: [
                  moment()
                    .month(moment().month())
                    .startOf('month'),
                  moment()
                    .month(moment().month())
                    .endOf('month')
                ],
                上月: [
                  moment(
                    moment()
                      .subtract(1, 'month')
                      .format('YYYY-MM') + '-01'
                  ),
                  moment(
                    moment()
                      .subtract(1, 'month')
                      .format('YYYY-MM') + '-01'
                  )
                    .subtract(-1, 'month')
                    .add(-1, 'days')
                ],
                半年: [
                  moment()
                    .startOf('day')
                    .subtract(6, 'month'),
                  moment()
                ]
              }"
              format="YYYY-MM-DD"
              @change="passChange"
              class="timepacker br4"
              style="width:230px;"
            >
            </a-range-picker>
            <span class="title">返回类型：</span>
            <a-select
              label-in-value
              class="selecth24 br4"
              style="width: 175px;height:24px;"
              placeholder="请选择状态"
              @change="handleChange"
              v-model="type"
              allowClear
            >
              <a-select-option :value="1">
                汇总数据
              </a-select-option>
              <a-select-option :value="2">
                实时数据
              </a-select-option>
            </a-select>
            <a-button
              type="primary"
              :disabled="btnloading"
              size="small"
              class="br4"
              @click="getWebOrderForm(1)">
              <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
              {{ btnloading===true?'筛选中...':'筛选' }}
            </a-button>
            <a-button size="small">导出</a-button>
          </a-space>
        </div>
      </div>
      <div class="invesordertable">
        <a-table
          :columns="columns"
          :rowKey="(item,index) => index"
          :dataSource="invesorder"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination"
        >
          <div slot="itemId" slot-scope="text, row">
            <div class="goodsinfo">
              <div class="line-1" style="width:289px">
                <a :href="'https://detail.tmall.com/item.htm?id='+row.itemId" target="_blank" rel="noopener noreferrer">
                  {{ row.title }}</a></div>
              <div>商品ID:{{ row.itemId }}</div>
            </div>
          </div>
          <div slot="startTime" slot-scope="text, row">
            <div>起:{{ row.startTime }}</div>
            <div>止:{{ row.endTime }}</div>
          </div>

          <div slot="is_serviceRate" slot-scope="text, row">
            <div>{{ row.is_serviceRate }}</div>
          </div>
          <div slot="active" slot-scope="row">
            <div>
              <a-button type="link" @click="goedit(row)">详情</a-button>
            </div>
          </div>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
  import { getWebOrderForm } from '@/api/admin/investment'
  import moment from 'moment'

  export default {
    name: 'Invesorder',
    data () {
      return {
        moment,
        shopTitle: '',
        itemId: '',
        classList: [],
        type: {
          key: 1,
          label: '汇总数据'
        },
        is_eventId: '',
        user_id: '',
        group_id: '',
        start: '',
        end: '',
        search: '',
        status: 0,
        pagination: {
          pageSize: 15,
          page: 1
        },
        columns: [
          {
            title: '用户',
            align: 'center',
            dataIndex: 'user',
            scopedSlots: { customRender: 'user' }
          },
          {
            title: '商品信息',
            dataIndex: 'itemId',
            scopedSlots: {
              customRender: 'itemId'
            }
          },
          {
            title: '订单时间',
            dataIndex: 'is_addTime',
            scopedSlots: {
              customRender: 'is_addTime'
            }
          },
          {
            title: '店铺',
            dataIndex: 'shopTitle',
            scopedSlots: {
              customRender: 'shopTitle'
            }
          },
          {
            title: '活动ID',
            dataIndex: 'eventId',
            scopedSlots: {
              customRender: 'eventId'
            }
          },
          {
            title: '排期时间',
            dataIndex: 'startTime',
            scopedSlots: {
              customRender: 'startTime'
            }
          },
          {
            title: '商品单价',
            dataIndex: 'is_goodsPrice',
            scopedSlots: {
              customRender: 'is_goodsPrice'
            }
          },
          {
            title: '服务费率',
            // dataIndex: 'is_serviceRate',
            scopedSlots: {
              customRender: 'is_serviceRate'
            }
          },
          {
            title: '订单数',
            dataIndex: 'order_num',
            scopedSlots: {
              customRender: 'order_num'
            }
          },
          {
            title: '支付金额',
            dataIndex: 'is_alipayFee',
            scopedSlots: {
              customRender: 'is_alipayFee'
            }
          },
          {
            title: '下单数量',
            dataIndex: 'is_goodsNum',
            scopedSlots: {
              customRender: 'is_goodsNum'
            }
          },
          {
            title: '预估服务费',
            dataIndex: 'is_serviceFee',
            scopedSlots: {
              customRender: 'is_serviceFee'
            }
          }
        ],
        invesorder: [
          // {
          //   user: '从雪艳', // 用户
          //   title: '八马茶叶 武夷岩茶肉桂乌龙茶自饮盒装160克', // 商品标题
          //   itemId: '549112037038', // 商品id
          //   is_addTime: '2020-11-13 00:00:00', // 订单时间
          //   shopTitle: '八马旗舰店', // 店铺名称
          //   eventId: '386699871', // 活动id
          //   startTime: '2020-10-30', // 开始时间
          //   endTime: '2020-11-30', // 结束时间
          //   is_goodsPrice: '288', // 单价
          //   is_serviceRate: '6.00%', // 服务费率
          //   order_num: 68, // 订单数
          //   is_alipayFee: 77150007730.18, // 支付金额
          //   is_goodsNum: '446.00', // 下单数
          //   is_serviceFee: 4630000463.82 // 预估服务费
          // }
        ],
        loading: false,
        btnloading: false
      }
    },
    computed: {},
    created () {
      this.getWebOrderForm(1)
    },
    mounted () {
    },
    methods: {
      statusChange (value) {
        console.log(value, this.status) //
      },
      openimg (url) {
        this.previewImage = url
        this.previewVisible = true
      },
      handleCancel () {
        this.previewVisible = false
      },
      goedit (row) {
        this.$store.dispatch('setIssuename', row)
        this.$router.push({
          path: '/gather/invesorder/gatherInfo'
        })
      },
      handleChange (value) {
        console.log(value, this.status) //
      },
      passChange (dates, dateStrings) {
        // console.log('From: ', dates[0], ', to: ', dates[1])
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
        this.start = dates[0].unix()
        this.end = dates[1].unix()
        console.log(this.start, this.end)
        // const str = moment(dateStrings[0]).format('YYYY-MM-DD') + ' 至 ' + moment(dateStrings[1]).format('YYYY-MM-DD')
      },
      getWebOrderForm (page) {
        this.loading = true
        this.btnloading = true
        getWebOrderForm({
          group_id: this.group_id,
          user_id: this.user_id,
          type: this.type.key,
          start: this.start,
          end: this.end,
          shopTitle: this.shopTitle,
          itemId: this.itemId,
          is_eventId: this.is_eventId,
          page: page,
          pagesize: 15
        }).then(res => {
          if (res.code === 200) {
            console.log('列表', res)
            this.invesorder = res.data.data
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.total
            this.pagination = pagination
          } else {
            this.$message.error(res.msg)
          }
          this.loading = false
          this.btnloading = false
        }).catch(err => {
          console.log(err)
        })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getWebOrderForm(params.page)
      }
    }
  }
</script>
<style lang="less" scoped>
  .invesorder {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 20px;
      margin-bottom: 18px;
      font-weight: 600;
    }

    .index {
      background-color: #f5f5f5;
      border-radius: 20px;
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      /*margin-right: 24px;*/
      height: 20px;
      line-height: 20px;
      width: 20px;
      text-align: center;
    }

    .bgg {
      border-radius: 8px;
      margin-top: 10px;
      padding: 10px;
    }

    .h24 {
      /deep/ .ant-radio-button-wrapper {
        height: 24px;
        line-height: 22px;
      }
    }

    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }

    /deep/ .ant-table-body {
      border: 1px solid #BBBBBB;
      border-radius: 8px 8px 0 0;
    }

    /deep/ .ant-table-tbody {
      background-color: #ffffff;
    }

    /deep/ .ant-table-pagination.ant-pagination {
      float: none !important;
      margin: 16px auto !important;
      text-align: center !important;
    }

    .a_blue {
      color: #2396F9;
    }

    .title {
      color: #101010;
      font-size: 14px;
      font-weight: 600;
    }

    .ipt {
      width: 138px;
      height: 24px;
    }

    .timepacker {
      /deep/ .ant-calendar-picker-input {
        padding: 0;
        height: 24px;
      }
    }

    .selecth24 {
      /deep/ .ant-select-selection__rendered {
        line-height: 24px;
      }

      /deep/ .ant-select-selection {
        height: 24px;
        border-radius: 4px;
      }
    }

    .coupon {
      /*border: 1px solid rgb(255, 85, 64);*/
      text-align: center;
      font-size: 14px;
      border-radius: 4px;
      overflow: hidden;
      width: 96px;
      /*margin: 0 auto;*/

      .couponleft {
        width: 48px;
        height: 24px;
        line-height: 24px;
        background-color: rgb(255, 85, 64);
        color: #ffffff;
      }

      .couponright {
        width: 48px;
        height: 24px;
        line-height: 21px;
        background-color: #ffffff;
        color: rgb(255, 85, 64);
        border: 1px solid #ff5540;
        border-radius: 0 4px 4px 0;
      }
    }
  }
</style>
